<template>
  <div>
    <input v-model="input" @keyup.enter="search" placeholder="请输入歌名" class="input" />
    <!-- <button>提交</button> -->
    <section class="main">
      <ul class="music-list">

      </ul>
    </section>
  </div>
</template>

<script>
import axios from "axios";
import { API } from "../../common/constant";
export default {
  data() {
    return {
      // 双向数据绑定
      input: "",
      // 搜索结果
      datalist: [],
      // 歌曲的播放地址
      url: "",
    };
  },
  methods: {
    // 搜索
    search() {
      axios({
        // 请求的地址
        url: `${API}/cloudsearch?keywords=${this.input}`,
        // 请求的方法
        method: "get",
        params: {
          keywords: this.value,
        },
      }).then((res) => {
        console.log(res);
        this.$router.push("/searchd?q=" + this.input);
        // this.datalist = res.data.result.songs.slice(0, 9);
      });
    },
  },
};
</script>
<style scoped>
.input {
  margin-left: 200px;
  font-size: 12px;
  width: 300px;
  height: 40px;
  margin-left: 45px;
  bottom: 1;
}
ul li {
  overflow: hidden;
  height: 20px;
  line-height: 20px;
  list-style: none;
  z-index: 100000;
}
ul {
  width: 350px;
  position: fixed;
  top: 58px;
  left: 441px;
  visibility: visible;
  background-color: white;
}
ul li:hover {
  background-color: gray;
}
a {
  color: #000;
  text-decoration: none;
}
</style>